<template>
  <div style="position: absolute;top:0;left:0;bottom: 0;right:0;overflow: auto;padding-bottom: 1em;">
    <div class="pannel">
      <div class="title-pannel">
        <div style="min-width: 300px">
          <b style="font-size: 160%">{{par_row.title}}</b>
          <el-tag  :type="status_type" size="small">{{par_row._status_label}}</el-tag>
        </div>
        <div class="current-depart">
          <div><b>当前流转部门</b> </div>
          <div><b>上报部门</b> </div>
          <div class="depart-name">
            <div>{{par_row.current_department}}</div>
            <div class="username">{{par_row._current_user_label }}</div>
          </div>
          <div class="depart-name">
            <div>{{par_row.create_department}}</div>
            <div class="username">{{par_row._create_user_label }}</div>
          </div>
        </div>

        <div>
<!--          <el-button-group>-->
          <el-button-group v-if="is_my_event && !has_closed">
            <el-button v-if="can_close" type="primary"  size="mini" @click="close_case()">关闭</el-button>
            <el-button v-if="can_direct_close && !can_close" type="primary"  size="mini" @click="close_case()">直接关闭</el-button>
            <el-button v-if="can_flow" type="primary" size="mini" @click="flow_case()">流转</el-button>
            <el-button v-if="can_finish" type="primary" size="mini" @click="finish_case()">结件</el-button>

            <el-button v-if="can_agree" type="success" size="mini" @click="agree_case()">同意</el-button>
            <el-button v-if="can_trans_to_zhong"  type="success" size="mini" @click="trans_zhong()">转总经办</el-button>
            <el-button v-if="can_agree || can_close || can_trans_to_zhong" type="primary" size="mini" @click="flow_case()">继续处理</el-button>
<!--can_agree:创建人可以不同意; can_close:质量部门和总经办可以不同意-->
          </el-button-group>
        </div>

      </div>
      <hr>

      <div class="base-property">
        <div class="edit-button" v-if="can_create">
          <el-button type="warning"  size="small" circle icon="el-icon-edit" @click="edit_base()"></el-button>
        </div>

<!--        <button style="position: absolute;right: 20px;top:10px;" @click="edit_base()">编辑</button>-->
        <div class="mylabel">优先级</div>
        <div class="my-field">{{par_row._priority_label}}</div>
        <div class="mylabel">类型</div>
        <div class="my-field">{{par_row._kind_label}}</div>
        <div class="mylabel">工单号</div>
        <div class="my-field">{{par_row.prod_no}}</div>
        <div class="mylabel">规格</div>
        <div class="my-field">{{par_row.model_spec}}</div>

        <div class="mylabel">品名</div>
        <div class="my-field">{{par_row.model_name}}</div>
        <div class="mylabel">品号</div>
        <div class="my-field">{{par_row.model_no}}</div>
        <div class="mylabel">不合格来源</div>
        <div class="my-field">{{par_row._fail_source_label}}</div>
<!--        <div class="mylabel">不合格类别</div>-->
<!--        <div class="my-field">{{par_row._fail_kind_label}}</div>-->
        <div class="mylabel"></div>
        <div class="my-field"></div>

        <div class="mylabel">不合格数量</div>
        <div class="my-field">{{par_row.fail_count}}</div>
        <div class="mylabel">总数数量</div>
        <div class="my-field">{{par_row.total_count}}</div>
        <div class="mylabel">不合格率</div>
        <div class="my-field">{{par_row.fail_ratio*100}}%</div>
        <div class="mylabel">创建时间</div>
        <div class="my-field">{{par_row.create_time}}</div>
      </div>
    </div>

    <div class="pannel" v-if="par_row.kind==2">
      <h3>客户信息</h3>
      <div class="base-property">
        <div class="mylabel">客户</div>
        <div class="my-field">{{par_row.customer_info}}</div>
        <div class="mylabel">退单号</div>
        <div class="my-field">{{par_row.quit_number}}</div>
      </div>

    </div>

    <div class="pannel" v-if="par_row.kind==3">
      <h3>供应商信息</h3>
      <div class="base-property">
          <div class="mylabel">供应商</div>
          <div class="my-field">{{par_row.supplyer_info}}</div>
          <div class="mylabel">收料单号</div>
          <div class="my-field">{{par_row.receive_number}}</div>
      </div>

    </div>

    <div class="pannel">
        <div class="flex" style="align-items: baseline">
          <div style="font-size: 140%;font-weight: bold">不合格内容</div>
          <div class="clickable" style="margin-left: 30px;" @click="export_fail_content">导出excel</div>
        </div>
      <failCount ref="fail_content_form" :row="par_row" :editable="can_edit_fail_content"></failCount>
    </div>

<!--    <div class="pannel">-->
<!--      <div class="edit-button" v-if="can_edit_tech">-->
<!--        <el-button type="warning" size="small" circle icon="el-icon-edit" @click="edit_processing()"></el-button>-->
<!--      </div>-->
<!--      <div class="tech-craft">-->
<!--        <div>-->
<!--          <el-tag effect="dark" type="primary">技术工艺</el-tag>-->
<!--        </div>-->

<!--        <div class="mylabel">处理方案</div>-->
<!--        <div class="my-field">{{par_row._processing_scheme_label}}</div>-->
<!--        <div class="mylabel">处理人员</div>-->
<!--        <div class="my-field">{{par_row._process_worker_label}}</div>-->
<!--        <div class="mylabel">处理日期</div>-->
<!--        <div class="my-field">{{par_row.process_datetime.slice(0,10)}}</div>-->
<!--      </div>-->
<!--      <div class="tech-craft-suggest">-->
<!--        <div class="mylabel lefttext">技术意见</div>-->
<!--        <div class="mylabel lefttext">工艺意见</div>-->
<!--        <div  class="text-show my-field">{{par_row.tech_suggest}}</div>-->
<!--        <div class="text-show my-field">{{par_row.craft_suggest}}</div>-->

<!--        <div class="mylabel lefttext" >技术纠正和预防措施</div>-->
<!--        <div class="mylabel lefttext" >工艺纠正和预防措施</div>-->
<!--        <div class="text-show my-field">{{par_row.tech_correct_action}}</div>-->
<!--        <div class="text-show my-field">{{par_row.craft_correct_action}}</div>-->
<!--      </div>-->
<!--    </div>-->

    <div class="pannel">
      <div class="edit-button" v-if="can_edit_validate">
<!--        <i class="el-icon-edit-outline" @click="edit_validate()"></i>-->
        <el-button type="warning"  size="small" circle icon="el-icon-edit" @click="edit_validate()"></el-button>
      </div>
<!--      <button style="position: absolute;right: 20px;top:10px;" @click="edit_validate()">编辑</button>-->
      <div class="quality-head">
          <div>
            <el-tag effect="dark" type="success">
              质量验证
            </el-tag>
          </div>
          <div class="mylabel">验证人员</div>
          <div class="my-field">{{par_row._validate_worker_label}}</div>
          <div class="mylabel">处理日期</div>
          <div class="my-field">{{par_row.validate_datetime.slice(0,10)}}</div>
      </div>

      <div>
        <div class="mylabel lefttext" style="margin: 10px 0">措施验证</div>
        <div class="text-show my-field">{{par_row.validate_action}}</div>
      </div>

    </div>
    <div class="pannel">
      <div class="edit-button" v-if="can_edit_approval">
        <el-button type="warning"  size="small" circle icon="el-icon-edit" @click="edit_approval()"></el-button>
      </div>
<!--      <button style="position: absolute;right: 20px;top:10px;" @click="edit_approval()">编辑</button>-->
      <div class="quality-head">
        <div>
          <el-tag effect="dark" type="warning">
            总经办审批
          </el-tag>
        </div>

<!--        <el-button type="warning" size="small">总经办审</el-button>-->
<!--        <div>总经办审批</div>-->
        <div class="mylabel">审批人员</div>
        <div class="my-field">{{par_row._approval_worker_label}}</div>
        <div class="mylabel">处理日期</div>
        <div class="my-field">{{par_row.approval_datetime.slice(0,10)}}</div>
      </div>
      <div>
        <div class="mylabel lefttext" style="margin-top: 10px">审批意见</div>
        <div class="text-show my-field">{{par_row.approval_suggest}}</div>
      </div>

    </div>
    <div class="pannel message-pannel">
      <eventProcess :qualityEventId="par_row.pk"></eventProcess>
    </div>
  </div>

</template>
<script>
import eventProcess from "../components/eventProcess.vue";
import failCount from './qualityFlow/failCount.vue'
export  default  {
  components:{
    eventProcess,
    failCount
  },
  props:['tab_head','par_row'],
  computed:{
    status_type(){
      var mmap = {
        2:'warning',
        3:"success",
        4:"info",
      }
      return  mmap[this.par_row.status]
    },
    is_my_event(){
      return this.tab_head.my_user_id == this.par_row.current_user
    },
    has_closed(){
      return this.par_row.status ==5
    },
    can_close(){
      if(!this.tab_head.button_can_close){
          return  false
      }
      if(this.par_row._need_zhong_agree){ // > 3%
        return  this.par_row.status ==6   // 6->5 总经办关闭
      }else {
        return  this.par_row.status == 4  // 4->5 质量部门关闭
      }
    },
    can_direct_close(){
       return  this.par_row._user_can_direct_close
    },
    can_flow(){
      if(this.par_row.status ==2){
        return true
      }
    },
    can_finish(){
      if(this.par_row.status ==2 ){
        return true
      }
    },
    can_trans_to_zhong(){
      if(this.par_row._need_zhong_agree){
        return this.par_row.status==4   // 4->6 质量部门 转总经办处理
      }
    },
    can_agree(){
      return  this.par_row.status==3   // 3->4  创建人同意后，转到质量部门
    },
    can_create(){
      return !this.has_closed && this.is_my_event && this.tab_head.can_create && this.par_row.current_department == this.par_row.create_department
    },
    can_edit_tech(){
      return !this.has_closed && this.is_my_event && this.tab_head.can_edit_tech
    },
    can_edit_fail_content(){
      return !this.has_closed && this.is_my_event && this.tab_head.can_edit_fail_content &&
          ( this.par_row.current_department == this.par_row.create_department || this.tab_head.user_department==3 )
    },
    can_edit_validate(){
      return !this.has_closed && this.is_my_event && this.tab_head.can_edit_validate
    },
    can_edit_approval(){
      return !this.has_closed && this.is_my_event && this.tab_head.can_edit_approval
    }
  },
  methods:{
    export_fail_content(){
      var form_heads = this.$refs.fail_content_form.head.fields_heads
      if(!this.par_row.fail_content){
         cfg.toast('请设置不合格内容后，再导出！')
        return
      }
      var post_data = {
        director_name:'json-to-excel',
        search_args:{
          heads:form_heads,
          rows:JSON.parse(this.par_row.fail_content)
        }
      }
      cfg.show_load()
      ex.director_call('d.gen_excel',post_data).then((resp)=>{
        cfg.hide_load()
        var url = resp.file_url
        ex.download(url)
      })
    },
    trans_zhong(){
      var fields_ctx = named_ctx['quality.flow.trans_zhong']
      fields_ctx.preset = {
        quality_event :this.par_row.pk
      }
      cfg.pop_vue_com('com-form-one',fields_ctx).then(resp=>{
        ex.vueAssign(this.par_row,resp)
        live_root.pop_tab_stack()
      })

    },
    agree_case(){
      var fields_ctx = named_ctx['quality.flow.agree']
      fields_ctx.preset = {
        quality_event :this.par_row.pk
      }
      cfg.pop_vue_com('com-form-one',fields_ctx).then(resp=>{
        ex.vueAssign(this.par_row,resp)
        live_root.pop_tab_stack()
      })
    },
    edit_base(){
      var ctx = named_ctx['quliaty_event_base_form']
      ctx.row = this.par_row
      ctx.row.meta_op = 'base'
      cfg.pop_vue_com('com-form-one',ctx,{maxmin:true}).then(resp=>{
        ex.vueAssign(this.par_row,resp)
      })
    },
    edit_processing(){
      var ctx = named_ctx['quliaty_event_processing_form']
      ctx.row = this.par_row
      ctx.row.meta_op = 'processing'
      cfg.pop_vue_com('com-form-one',ctx).then(resp=>{
        ex.vueAssign(this.par_row,resp)
      })
    },
    edit_validate(){
      var ctx = named_ctx['quality_event_validata_form']
      ctx.row = this.par_row
      ctx.row.meta_op = 'validating'
      cfg.pop_vue_com('com-form-one',ctx).then(resp=>{
        ex.vueAssign(this.par_row,resp)
      })
    },
    edit_approval(){
      var ctx = named_ctx['quality_event_approval_form']
      ctx.row = this.par_row
      ctx.row.meta_op = 'approval'
      cfg.pop_vue_com('com-form-one',ctx).then(resp=>{
        ex.vueAssign(this.par_row,resp)
      })
    },
    async close_case(){
      var fields_ctx = named_ctx['quality.flow.close']
      fields_ctx.preset = {
        quality_event:this.par_row.pk
      }
      await cfg.pop_vue_com('com-form-one',fields_ctx)
      await  ex.update_row(this.par_row)
      live_root.pop_tab_stack()

    },
    async flow_case(){
      var fields_ctx = named_ctx['quality.flow.edit']
      fields_ctx.preset = {
        quality_event :this.par_row.pk
      }
      await cfg.pop_vue_com('com-form-one',fields_ctx)
      await ex.update_row(this.par_row)
      this.par_row.current_user = 0
      live_root.pop_tab_stack()
    },
    async finish_case(){
      var fields_ctx = named_ctx['quality.flow.finish']
      fields_ctx.preset = {
        quality_event :this.par_row.pk
      }
      await cfg.pop_vue_com('com-form-one',fields_ctx)
      await ex.update_row(this.par_row)
      live_root.pop_tab_stack()
    }
  }
}
</script>

<style scoped lang="scss">
.mylabel{
  //font-weight: 600;
  font-weight: bold;
  font-size: 110%;
  text-align: right;
  margin-right: 10px;
}
.my-field{
  color: gray;

  //font-size: 90%;
}
.title-pannel{
  display: flex;
  &>div{
    margin-right:30px;
  }

}
.edit-button{
  position: absolute;
  right: 20px;
  top:10px;
}
.pannel{
  position: relative;
  background-color: white;
  margin: 10px auto;
  border: 1px solid #c4c2c2;
  padding: 20px;
  width: 1100px;
}
.current-depart{
  display: grid;
  grid-template-columns:200px 200px;
  .depart-name{
    div{
      display: inline-block;
    }
    .username{
        color: #a6a6a6;
        font-size: 80%;
    }
  }
}
.base-property{

  display: grid;
  grid-template-columns: repeat(4, 100px 150px);
  grid-template-rows:repeat(3 , 30px);
}

.tech-craft{
  display: grid;
  grid-template-columns: 150px 100px 120px 100px 120px 100px 120px ;
}
.tech-craft-suggest{
  display: grid;
  grid-template-columns: 48% 48% ;
  grid-column-gap: 4%;
  grid-row-gap: 10px;
  margin:  20px 0;
}
.text-show{
  border: 1px solid #eae8e8;
  min-height: 80px;
  padding: 10px;
}
.lefttext{
  text-align: left;
}
.quality-head{
  display: grid;
  grid-template-columns: 150px 100px 120px 100px 120px ;
}
.message-pannel{
  //margin: auto;
  //width: 900px;
  padding: 20px 120px;
  min-height: 300px;
}
</style>